<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />
      <div class="main-content">
        <digital-flop
          :sum_message_num="sum_message_num"
          :start="start"
          :end="end"
          :group="this.$route.params.group"
        />
        <div class="block-left-right-content">
          <ranking-board :data="this.$route.params.data" ref="rankingboard"  />
          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <rose-chart :data="this.$route.params.data" ref="rosechart" />
              <water-level-chart />
              <scroll-board :data="scroll_board" ref="scollboard"/>
            </div>
            <cards />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from "../components/datav/topHeader";
import digitalFlop from "../components/datav/digitalFlop";
import rankingBoard from "../components/datav/rankingBoard";
import roseChart from "../components/datav/roseChart";
import waterLevelChart from "../components/datav/waterLevelChart";
import scrollBoard from "../components/datav/scrollBoard";
import cards from "../components/datav/cards";
export default {
  name: "Message",
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    cards,
  },
  props: ["data", "real_time", "group"],
  data() {
    return {
      websock: null,
      sum_message_num: 0,
      start: "",
      end: "实时",
      scroll_board: [],
    };
  },
  created() {
    this.calInit();
    if (this.$route.params.real_time) this.initWebSocket();
  },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    calInit() {
      //计算最上面的digitalflop
      let data = this.$route.params.data;
      this.sum_message_num = data.length;
      this.start = this.formatDate(this.$route.params.start);
      if (this.$route.params.real_time) {
        this.end = "实时";
      } else {
        this.end = this.formatDate(this.$route.params.end);
      }
      //计算scollboard
    
      for (let i = 0; i < data.length&&i<20; i++) {
          this.scroll_board.push([this.formatDateS(data[i].create_time), data[i].content, data[i].label2,data[i].remark]);
        }
    },
    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://127.0.0.1:8000/api/dynamicmessage/";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = { group: this.$route.params.group };
      this.websocketsend(JSON.stringify(actions));
      console.log("连接成功");
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    websocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      this.receive(redata);
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
      if(e.code!=1000)
      {
        this.initWebSocket();
      }
    },
    receive(data) {
      //修正最上面flop
      this.sum_message_num++;
      //修正scoll_board
      this.$refs.scollboard.updateData(data);
      //修正饼图
      this.$refs.rosechart.updateData(data);
      //修正ranking
      this.$refs.rankingboard.updateData(data);
    },
    formatDate(UTCDateString) {
      if (!UTCDateString) {
        return "-";
      }
      function formatFunc(str) {
        //格式化显示
        return str > 9 ? str : "0" + str;
      }
      var date2 = new Date(UTCDateString); //这步是关键
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var hour = formatFunc(date2.getHours());
      var minute = formatFunc(date2.getMinutes());
      var dateStr = year + "-" + mon + "-" + day + " " + hour + ":" + minute;
      return dateStr;
    },
    formatDateS(UTCDateString) {
      if (!UTCDateString) {
        return "-";
      }
      function formatFunc(str) {
        //格式化显示
        return str > 9 ? str : "0" + str;
      }
      var date2 = new Date(UTCDateString); //这步是关键
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var hour = formatFunc(date2.getHours());
      var minute = formatFunc(date2.getMinutes());
      var second = formatFunc(date2.getSeconds());
      var dateStr =
        year + "-" + mon + "-" + day + " " + hour + ":" + minute + ":" + second;
      return dateStr;
    },
  },
};
</script>


<style lang="less" scoped>
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("../components/datav/img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
}
</style>
